<template>
  <!--pages/index/component/travelList/travelList.wxml-->
  <div class="content">
    <div class="scroll-div_H"   style="width: 100%">
      <div class="title_item_content" v-for="(item,index) in title"  @click="toTitle(index)">
        <span :class="[isIndex==index?'title_text':'noselect']">{{item.title}}</span>
        <div v-if="isIndex==index" class="title_line"></div>
      </div>
    </div>
    <div class="travel_item_content">
      <div class="travel_item" v-for="item in travles" @click="travellistClick">
        <div class="travel_image">
          <img :src="item.thumbnail" style="height: 100%;width: 100%"><img>
        </div>
        <div class="travel_bottom_content">
          <div class="top_title_content">
            <span class="top_title">{{item.name}}</span>
            <div class="top_left_content">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/lvyou/lvyou-juli.png" style="width:9.5px;height:12.5px;margin-right:7.5px"></img>
              <span class="far_text">3.4km</span>
            </div>
          </div>
          <span class="subTitle_text">{{item.subTitle}}</span>
          <div class="bottom_content">
            <div class="bottom_left_content">
              <span class="point_num">{{item.score|fiexNumber}}</span>
              <span class="point_text">分</span>
            </div>
            <div class="bottom_right_content">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/lvyou/lvyou-xihuanxin.png"
                     style="width:11.5px;height:9.5px"></img>
              <span class="love_number">{{item.love}}人喜欢</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {list} from '@/api/scenic'

  export default {
    name: 'travelList',
    data(){
      return{
        travles:[],
        isIndex:0,
        title:[
          {title:'全部'},
          {title:'荔城区'},
          {title:'城厢区'},
          {title:'涵江区'},
          {title:'秀屿区'},
          {title:'湄洲岛'},
          {title:'仙游县'},
          {title:'北岸开发区'},

        ]
      }
    },
    filters:{
      fiexNumber(val){
        return  val.toFixed(1)
      }
    },
    created() {
      this.loadList()
    },
    methods:{
      loadList(){
        list().then(res=>{
          this.travles=res.data.data
        })
      },
      toTitle(data){
        this.isIndex=data
      },
      travellistClick(){},
    }
  }
</script>

<style scoped>
  /* pages/index/component/travelList/travelList.wxss */
  .content {
    margin-top: 11px;

  }

  .scroll-div_H {
    white-space: nowrap;
    background-color: white;
    display: flex;
    overflow-x: auto;

  }

  .scroll-div-item_H {
    display: inline-block;
    width: 375px;
    /* height: 300px; */
  }

  .title_item_content {
    display: inline-flex;
    margin-top: 20.5px;
    padding-right: 10px;
    min-width: 65px;
    align-items: center;
    flex-shrink: 1;
    flex-direction: column;
    justify-content: space-between;
  }

  .title_text {

    font-size: 16.5px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #A92B23;
  }
  .noselect{
    font-size: 16.5px;
    font-family: SourceHanSansCN;
    font-weight: bold;
  }
  .title_line {
    background-color: #A92B23;
    height: 2.5px;
    margin-top: 10px;
    width: 69.5px;
  }

  .travel_item_content {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 10px 15px 10px;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .travel_item {
    width: 172.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
    /*height: 267px;*/
    background: #FFFFFF;
    border-radius: 6.5px;
    margin-bottom: 10px;
  }

  .travel_image {
    width: 172.5px;
    height: 166px;
    border-top-right-radius: 6.5px;
    border-top-left-radius: 6.5px;
    background-color: teal;
  }

  .travel_bottom_content {
    padding: 10px;
    height: 101px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
  }

  .top_title_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .top_title {
    font-size: 13.5px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #A92B23;
    line-height: 13.5px;
    width: 92.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .top_left_content {
    display: flex;
    align-items: center;
  }

  .far_text {

    font-size: 12px;
    font-family: DIN;
    font-weight: 500;
    color: #666666;
  }

  .subTitle_text {
    width: 129.5px;
    color: #333333;
    font-size:10px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 14px;
    -webkit-box-orient: vertical;
  }
  .bottom_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12.5px;
  }
  .bottom_left_content{
    display: flex;
  }
  .point_num{
    font-size: 16.5px;
    font-family: DIN;
    font-weight: 500;
    color: #EB6100;
    line-height: 16.5px;
  }
  .point_text{
    font-size: 10px;
    font-family: DIN;
    font-weight: 500;
    color: #EB6100;
    line-height: 20.5px;
  }
  .bottom_right_content{
    display: flex;

  }
  .love_number{
    font-size: 10px;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #666666;
    line-height: 10px;
    margin-left: 10px;
  }
</style>
